<script>
// import Icon from 'fehorizon-ui/packages/icon';
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import { renderNodeJSX } from '../../../utils/render-node.js';

export default {
  name: 'vCard',

  props: {
    defaultValue: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    header: {
      type: [String, Boolean],
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: [String, Boolean],
      default: '',
    },
    headerBorder: {
      type: Boolean,
      default: false,
    },
    collapse: {
      type: Boolean,
      default: true,
    },
    subCard: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      isCollapse: false,
    };
  },

  computed: {
    cardClass() {
      return [
        'v-card',
        {
          'v-card--border': this.border,
          'v-card--header-border': this.headerBorder,
          'v-card--body-padding-top': this.headerBorder || this.header === false || !this.title,
          'v-card--sub-card': this.subCard,
        },
      ];
    },
  },

  created() {
    if (this.collapse) {
      this.isCollapse = this.defaultValue;
    }
  },

  methods: {
    handleCollapse() {
      if (this.collapse) {
        this.isCollapse = !this.isCollapse;
      }
    },

    getHeaderIcon() {
      if (this.icon === false) {
        return;
      }
      return renderNodeJSX(this, 'icon', () => {
        if (this.collapse) {
          return <i class={ this.isCollapse ? 'el-icon-caret-right v-card__header-icon' : 'el-icon-caret-bottom v-card__header-icon' } />;
        }
        return <i class={`${this.icon} v-card__header-icon`} />;
      });
    },

    getHeader() {
      if (this.header === false || !this.title) {
        return null;
      }

      return renderNodeJSX(this, 'header', (h) => {
        return (
          <div class="v-card__header">
            <h3 class={['v-card__header-title', { collapse: this.collapse }]} onClick={this.handleCollapse}>
              {this.getHeaderIcon()}
              {renderNodeJSX(this, 'title') || this.title}
            </h3>
            {renderNodeJSX(this, 'actions')}
          </div>
        );
      });
    },

    getBody() {
      return (
        <div v-show={!this.isCollapse} class="v-card__body-warp">
          <div class="v-card__body">
            {this.$slots.default}
          </div>
        </div>
      );
    },
  },

  render() {
    return (
      <div class={this.cardClass}>
        {this.getHeader()}
        {
          this.collapse ? <CollapseTransition>{this.getBody()}</CollapseTransition> : this.getBody()
        }
      </div>
    );
  },
};
</script>


<style lang="scss">
@import '../style/index.scss';
</style>
